<template>
    <div class="personalCoupon">
        <div class="personalCouponContent">
          <!-- <div class="couponLoading" v-if="couponState === 1">礼券记载中...</div> -->
          <div class="couponGroup" v-if="couponState === 2">
            <div class="couponCell" v-for="(item, index) in couponData" :key="index" :style="{'background-image' : item.g_type === 1? 'url('+ item.coupon_img+')': 'url('+ item.gift_img+')'}" @click="showAddressModule(item)">
              
              <!-- <div class="cellKims" v-if="item.g_type === 1">
                <div>50元课程代金券</div>
                <div>（购买课程时候会直接抵扣）</div>
              </div>
              <div class="cellGift" v-if="item.g_type === 2" >
                <div>悦器礼盒</div>
                <div>（直接点击兑奖）</div>
              </div> -->

              <!-- <button open-type="openSetting" v-if="!showScopeAddress && item.g_type === 2"></button> -->
            </div>
          </div>
          <div class="couponWithout" v-if="couponState === 3">
            <!-- 没有礼券 -->
            <img src="http://mobuz-mp.cdn.bcebos.com/course/certificate/image/default_03@2x.png" lazy-load  mode="widthFix">
          </div>
        </div>
        
        <!-- <button @click.stop.prevent="showAddressModule"> default </button> -->

        <!-- <button type="default" hover-class="other-button-hover"  @click.stop.prevent="addressMenuIsShow = true"> default </button> -->
        <!-- <addressModule :addressMenuIsShow="addressMenuIsShow" @addressModuleClose="addressModuleClose"></addressModule> -->
    </div>
</template>

<script>
import {obtainPersonalCoupon, convertPersonalGift} from '@/config/api'
import {accreditFlag, showMessager} from '@/config/wUtils'
// import addressModule from '@/components/address'
export default {
  // components:{
  //   addressModule
  // },
  data () {
    return {
        // 用户信息数据
        userData: [],
        // 礼券信息数据
        couponData: [],

        // addressMenuIsShow: false,

        // 显示 地址授权
        showScopeAddress: true,

        // 礼券 背景状态  1 加载..  2 有礼券  3 无礼券
        couponState: 1
    }
  },
  mounted () {
    let self = this
    // 初始化 我的礼券 界面
    self.initPersonalCoupon()
    // console.log(wx.getStorageSync('userInfo'), '.............初始化 我的礼券 界面')
  },
  methods: {
    // 默认弹出授权
    async defaultAccredit() {
        let self = this;
        // 位置授权
        let L_flag = await accreditFlag("scope.address");
        console.log(L_flag, '......默认弹出授权')
        if (L_flag) {
          // 显示 地址授权
          self.showScopeAddress = true;
        } else {
          // 显示 地址授权
          self.showScopeAddress = false;
        }
    },

    // 初始化 我的礼券 界面
    async initPersonalCoupon() {
        let self = this;
        // 礼券 背景状态  1 加载..  2 有礼券  3 无礼券
        self.couponState = 1
        if (wx.getStorageSync('userInfo')) {
          // 用户信息数据
          self.userData = wx.getStorageSync('userInfo')
          wx.showNavigationBarLoading()
          wx.showLoading({title: '加载中'})
          const couponInfo = await obtainPersonalCoupon(self.userData.openId, self.userData.unionId) 
          if (couponInfo.status === 200) {
              // 礼券信息数据
              self.couponData = couponInfo.data
              if (JSON.stringify(self.couponData) === '[]') {
                // 礼券 背景状态  1 加载..  2 有礼券  3 无礼券
                self.couponState = 3
              } else {
                // 礼券 背景状态  1 加载..  2 有礼券  3 无礼券
                self.couponState = 2
              }
              // // 是否有证书
              // self.certificateState = certificateInfo.state

              // 默认弹出授权
              self.defaultAccredit()
          }
          console.log(couponInfo, self.userData, '初始化 我的礼券 界面')
          wx.hideNavigationBarLoading()
          wx.hideLoading()
          wx.stopPullDownRefresh()
        }
    },

    // addressModuleClose(flag) {
    //   console.log(flag, '.............................')
    //   let self = this;
    //   self.addressMenuIsShow = flag
    // },

    // 兑换 我的礼品
    exchangePersonalGift(item) {
      // 礼盒 兑换
      if (item.g_type === 2) {
        wx.chooseAddress({
          async success (res) {
            // 本地用户信息
            const userInfo = wx.getStorageSync('userInfo')
            const userName = res.userName
            const userAddress = res.provinceName+res.cityName+res.countyName+res.detailInfo
            const userPhone = res.telNumber
            // console.log(userInfo, '..................userInfo')
            // console.log(item, '..................item')
            // console.log(res, '..................res')
            const exchangeResult = await convertPersonalGift(item.g_id, userInfo.openId, userName, userAddress, userPhone,userInfo.unionId)
            console.log(exchangeResult, '......exchangeResult')
            if (exchangeResult.status === 200) {
              showMessager('兑换成功， 请稍后留意通知')
            } else {
              showMessager('兑换失败')
            }
          }
        })
      }
    },

    // 显示 地址设置 模块
    showAddressModule(item) {
      let self = this;
      // 礼盒 兑换
      if (item.g_type === 2) {
         
        // 获取用户授权设置
        wx.getSetting({
          success (res) {
            console.log(res.authSetting["scope.address"], '....获取用户授权设置')
            // 用户 未授权
            if (res.authSetting["scope.address"] === undefined) {
              // 兑换 我的礼品
              self.exchangePersonalGift(item)
            }

            //  用户  同意授权
            if (res.authSetting["scope.address"] === true) {
              // 兑换 我的礼品
              self.exchangePersonalGift(item)
            }

            // 用户  拒绝授权 再次同意
            if (res.authSetting["scope.address"] === false) {
              console.log('地址 未授权')
              // // 默认弹出授权
              // self.defaultAccredit()

              // 打开设置界面，引导用户开启授权。
              wx.openSetting({
                success (res) {
                  console.log(res.authSetting, '....打开设置界面')
                  // res.authSetting = {
                  //   "scope.userInfo": true,
                  //   "scope.userLocation": true
                  // }
                  if (res.authSetting["scope.address"] === true) {
                    // 兑换 我的礼品
                    self.exchangePersonalGift(item)
                  }
                }
              })

            }
          }
        })
      }
    },

    // // 打开 地址授权设置
    // openSettingAddress(e) {
    //   let self = this;
    //   console.log(e, "打开 地址授权设置");
    //   if (!e.target.authSetting["scope.address"]) {
    //     // 显示 地址授权
    //     self.showScopeAddress = false;
    //   } else {
    //     // 显示 地址授权
    //     self.showScopeAddress = true;
    //     wx.chooseAddress({
    //       success (res) {
    //         console.log(res, '..................res')
    //       }
    //     })
    //   }
    // },
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // 初始化 我的礼券 界面
    self.initPersonalCoupon()
  },
  // 页面显示
  onShow () {
    let self = this;
    console.log('页面显示')
    // 初始化 我的礼券 界面
    self.initPersonalCoupon()
  }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.personalCoupon{
  width: 100%;
  // height: 100%;
  background: #ffffff;
  .personalCouponContent{
    width: 100%;
    .couponLoading{

    }
    .couponGroup{
      width: 686rpx;
      margin: 35.5rpx auto;
      .couponCell{
        width: 100%;
        height: 300rpx;
        text-align: center;
        border-radius: 10rpx;
        margin-bottom: 25rpx;
        background: #999;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
        .cellKims{
          font-size: 0;
          padding-top: 201rpx;
          div{
            line-height: 1;
            font-family: PingFangSC-Regular;
            color: #FFFFFF;
            letter-spacing: 0.65rpx;
            text-align: center;
            &:nth-child(1){
              font-size: 32rpx;
              height: 45rpx;
              line-height: 45rpx;
              margin-bottom: 6rpx;
            }
            &:nth-child(2){
              font-size: 24rpx;
              height: 33rpx;
              line-height: 33rpx;
            }
          }
        }
        .cellGift{
          font-size: 0;
          padding-top: 201rpx;
          div{
            line-height: 1;
            font-family: PingFangSC-Regular;
            color: #FFFFFF;
            letter-spacing: 0.65rpx;
            text-align: center;
            &:nth-child(1){
              font-size: 32rpx;
              height: 45rpx;
              line-height: 45rpx;
              margin-bottom: 6rpx;
            }
            &:nth-child(2){
              font-size: 24rpx;
              height: 33rpx;
              line-height: 33rpx;
            }
          }
        }

        button{
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: transparent;
          &::after {
              border: none;
          }
        }
      }
    }
    .couponWithout{
      // margin: 36rpx auto; 
      // width: 538rpx;
      // height: auto;
      // background: #f7f7f7;

      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: #f7f7f7;
      text-align: center;
      img{
        // width: 100%;
        width: 538rpx;
        margin: 36rpx auto; 
        height: auto;
        vertical-align: top;
      }
    }
  }
}
</style>
